<!--经营许可资质-->
<template>
  <div class="legal-policyLibrary-container">
    <HeaderIndex :isReturnText="false" :isClose="false" :isService="true" />
    <div class="theSearchArea">
      <van-search v-model="searchValue" placeholder="搜索资质证书名称/主管机关机构" @search="search" />
      <van-dropdown-menu active-color="#1989fa" class="businessPermit">
        <!--资质类别-->
        <van-dropdown-item
          title="资质类别"
          class="popsUpADropDownMenu"
          ref="qualificationCategory"
          title-class="qualificationCategory"
        >
          <div class="multiSelect" @click="potencyLevel($event, 'qualificationCategory')">
            <div class="item" v-for="(item, index) in qualificationCategoryData" :key="index">
              <span :class="[qualificationCategory.includes(item) ? 'choose' : '']">{{ item }}</span>
            </div>
          </div>
          <div class="btn">
            <van-button type="default" @click="onreset('qualificationCategory')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('qualificationCategory')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <!--强制适用-->
        <van-dropdown-item
          title="强制适用"
          class="popsUpADropDownMenu"
          ref="mandatoryApplication"
          title-class="mandatoryApplication"
        >
          <div class="multiSelect" @click="potencyLevel($event, 'mandatoryApplication')">
            <div class="item" v-for="(item, index) in mandatoryApplicationData" :key="index">
              <span :class="[mandatoryApplication.includes(item) ? 'choose' : '']">{{ item }}</span>
            </div>
          </div>
          <div class="btn">
            <van-button type="default" @click="onreset('mandatoryApplication')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('mandatoryApplication')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <!--专业主题-->
        <van-dropdown-item title="专业主题" class="popsUpADropDownMenu" ref="professionalTopic" title-class="professionalTopic">
          <div class="multiSelect" @click="potencyLevel($event, 'professionalTopic')">
            <div class="item" v-for="(item, index) in licenseToOperate" :key="index">
              <span :class="[professionalTopic.includes(item) ? 'choose' : '']">{{ item }}</span>
            </div>
          </div>
          <div class="btn">
            <van-button type="default" @click="onreset('professionalTopic')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('professionalTopic')"> 确认</van-button>
          </div>
        </van-dropdown-item>
        <!--涉及职能部门-->
        <van-dropdown-item
          title="涉及职能部门"
          class="popsUpADropDownMenu"
          ref="functionalDepartment"
          title-class="functionalDepartment"
        >
          <div class="multiSelect" @click="potencyLevel($event, 'functionalDepartment')">
            <div class="item" v-for="(item, index) in functionalDepartmentData" :key="index">
              <span :class="[functionalDepartment.includes(item) ? 'choose' : '']">{{ item }}</span>
            </div>
          </div>
          <div class="btn">
            <van-button type="default" @click="onreset('functionalDepartment')"> 重置</van-button>
            <van-button type="default" @click="onConfirm('functionalDepartment')"> 确认</van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="theListOf">
      <van-list v-model="loadingList" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
        <div v-for="(item, index) in listData" :key="index" class="card" @click="businessParticulars(item.id)">
          <div class="theTitle">{{ item.qualificationName }}</div>
          <div class="headings">
            <span>资质类别：{{ item.qualificationType }}</span>
            <span>强制适用：{{ item.mandatoryApplication }}</span>
            <span>主管机关或机构：{{ item.regulatoryAuthorities }}</span>
          </div>
          <div class="specializedSubject" v-show="item.professionalTheme">
            <img src="@/assets/images/zhuti.png" alt="主题" />专业主题：{{ item.professionalTheme }}
          </div>
          <div class="functionalDepartments" v-show="item.functionalDept">
            <img src="@/assets/images/bumen.png" alt="部门" />涉及职能部门：{{ item.functionalDept }}
          </div>
        </div>
      </van-list>
    </div>
    <div class="noData" v-if="loadingList === false && (listData?.length === 0 || listData === null)">
      <div class="bgImg"></div>
      <div class="title">暂无数据...</div>
    </div>
  </div>
</template>

<script>
import HeaderIndex from "@/components/header";
import { legalCertification, getBusinessLicenseList } from "@/api";
import {
  functionalDepartmentData,
  qualificationCategoryData,
  licenseToOperate,
  mandatoryApplicationData,
} from "@/utils/robotOptionsConfiguration.js";
export default {
  name: "legalPolicyLibrary",
  components: {
    HeaderIndex,
  },
  data() {
    return {
      searchValue: "", //搜索值
      param: {
        page: 1, //默认页数
        limit: 10, //默认一页的数量
        qualificationType: null, //资质类别
        qualificationName: null, //资质证书名称-pc
        regulatoryAuthorities: null, //主管机关机构-pc
        queryFromMoa: null, //资质证书名称/主管机关机构-搜索值
        mandatoryApplication: null, //强制适用
        professionalTheme: null, //专业主题
        functionalDept: null, //涉及职能部门
      },
      listData: [], //列表数据
      qualificationCategory: [], //资质类别选择的选项
      mandatoryApplication: [], //强制适用选择的选项
      professionalTopic: [], //专业主题选择的选项
      mandatoryApplicationData, //强制适用
      qualificationCategoryData, //资质类别
      licenseToOperate, //专业主题
      functionalDepartmentData, //职能部门
      functionalDepartment: [], //职能部门选择的选项
      loading: false, //加载状态
      loadingList: false, //上拉加载
      finished: false, //加载完成
    };
  },
  async created() {
    await legalCertification();
  },
  mounted() {
    this.search();
  },
  methods: {
    /**
     * 跳转详情
     */
    async businessParticulars(id) {
      this.$router.push({ name: "businessParticulars", query: { id } });
    },
    /**
     * 上拉加载
     * @return {Promise<void>}
     */
    async onLoad() {
      this.param.page++;
      const data = await getBusinessLicenseList(this.param);
      if (data?.data?.data !== null) {
        this.listData = this.listData.concat(data?.data?.data);
      }
      // 加载状态结束
      this.loadingList = false;
      // 数据全部加载完成
      if (!data?.data.count || this.listData?.length >= data?.data.count) {
        this.finished = true;
      }
    },
    /**
     * 选项卡选择
     * @param $event 选择的dom
     * @param type 类型
     */
    potencyLevel($event, type) {
      const value = $event.srcElement.innerText; //选项值
      if (this[type].includes(value)) {
        //当选项数组里面有当前数据
        const index = this[type].indexOf(value);
        this[type].splice(index, 1);
      } else {
        //当选项数组里面无当前数据
        this[type].push(value);
      }
    },
    /**
     * 搜索文件
     */
    async search() {
      this.loading = true;
      this.param.page = 1;
      this.finished = false;
      this.param.queryFromMoa = this.searchValue; //搜索值
      const data = await getBusinessLicenseList(this.param);
      this.loading = false;
      this.listData = data.data.data;
    },
    /**
     * 重置按钮
     */
    onreset(type) {
      this[type] = [];
      this.$refs[type].toggle();
    },
    /**
     * 确认按钮
     * @param type 选项卡类型
     */
    async onConfirm(type) {
      switch (type) {
        case "qualificationCategory":
          //资质类别数据转换
          this.param.qualificationType = this.qualificationCategory.join("、");
          break;
        case "mandatoryApplication":
          //强制适用数据转换
          //当用户全选或不选时为空,只选一个才赋值
          this.param.mandatoryApplication = this.mandatoryApplication.length === 1 ? this.mandatoryApplication.join("、") : "";
          break;
        case "professionalTopic":
          //专业主题数据转换
          this.param.professionalTheme = this.professionalTopic.join("、");
          break;
        case "functionalDepartment":
          //涉及职能部门数据转换
          this.param.functionalDept = this.functionalDepartment.join("、");
          break;
      }
      this.$refs[type].toggle();
      this.search();
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/styles/legalPolicyLibrary";
</style>
